<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="https://cdn.bootcss.com/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
</head>
<body>
 <div class="main">
     <div class="role_operation">
         <div class="sel_btn" id="sel_btn">
         <label>
             <input v-model="roleid" class="text-info" placeholder="请输入角色编号"/><a class="btn btn-info btn-sm" @click="selRole">查询</a>
         </label>
         </div>
         <div class="add_btn">
             <button class="btn btn-info btn-sm" onclick="toAdd()">新增用户</button>
         </div>
     </div>
     <div class="dataTable" id="dataTable">
         <table class="table table-bordered table-hover">
             <tr>
                 <th>编号</th>
                 <th>角色名</th>
                 <th>角色信息</th>
                 <th>操作</th>
             </tr>
             <!--/*@thymesVar id="roles" type="java.util.List<cn.itxdl.entity.Role>"*/-->
             <tr th:each="role : ${roles}">
                 <td th:text="${role.getRoleid()}"></td>
                 <td th:text="${role.getRolename()}"></td>
                 <td th:text="${role.getRoleinfo()}"></td>
                 <td><button class="btn btn-danger btn-sm" th:onclick="'updateTransfer('+ ${role.getRoleid()} +')'">修改</button>&nbsp;&nbsp;&nbsp;<button class="btn btn-danger btn-sm" th:onclick="'deleteRole('+${role.getRoleid()}+')'">删除</button></td>
             </tr>
         </table>
     </div>
     <div class="pageContent">
         <div class="pageNumber">
             <span>当前页数:[[${currentPage+1}]],</span>
             <span>总页数:[[${totalPages}]]</span>
         </div>
         <div class="pageOperation">
             <a class="btn btn-success btn-xs" href="/role/list?pageNum=0">首页</a>
             <!--/*@thymesVar id="currentPage" type="java.lang.Integer"*/-->
             <a class="btn btn-success btn-xs" th:href="@{/role/list(pageNum=(${currentPage}-1))}" th:if="${currentPage}>0">上一页</a>
             <a class="btn btn-success btn-xs" th:if="${currentPage}==0">上一页</a>
             <!--/*@thymesVar id="totalPages" type="java.lang.Integer"*/-->
             <a class="btn btn-success btn-xs" th:href="@{/role/list(pageNum=(${currentPage}+1))}" th:if="${currentPage}<(${totalPages}-1)">下一页</a>
             <a class="btn btn-success btn-xs" th:if="${currentPage}==(${totalPages}-1)">下一页</a>
             <a class="btn btn-success btn-xs" th:href="@{/role/list(pageNum=(${totalPages}-1))}">末页</a>
         </div>
     </div>
 </div>
 <script type="text/javascript">
     function updateTransfer(roleid) {
          window.location.href="/role/updateTransfer?roleid="+roleid;
     }
     var sel_btn = new Vue({
         el:"#sel_btn",
         data:{
             roleid:"",
         },
         methods:{
             selRole:function () {
                window.open("/role/selRole?roleid="+sel_btn.roleid);
             }
         }
     });
     function toAdd() {
         window.location.href="/role/toAdd";
     }
     function deleteRole(roleid) {
         $.ajax({
             url:"/role/deleteRole",
             type:"get",
             data:{
                 "roleid":roleid
             },
             success:function (data) {
                 var msg = data.msg;
                 if(msg === "success"){
                     alert("删除成功");
                     location.reload();
                 }
             }
         });
     }
     $(function(){
         //这里的first_vist可以是任意的值,反正我们是获取不到这个值的。打印一下，发现获取不到的cookie为null
         $first=$.cookie('first_vist');
         if(!$first||$first=='null'||$first==null){
             //第一次进页面，肯定是没有cookie的，所以这里设置cookie的值为1，时间为7天
             $.cookie('first_vist','1',{ expires: 7 });
         }else{
             //然后等下次回到页面，肯定会取到cookie的值，然后我们就反其道而行，给cookie赋值为null，同时刷新页面
             $.cookie('first_vist',null);
             location.reload(true);
         }
     });
 </script>
</body>
</html>